<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
"/>

<link rel="stylesheet" href="/dist/lib/weui.min.css" />
<link rel="stylesheet" href="/dist/css/jquery-weui.min.css" />
<link rel="stylesheet" href="/dist/demos/css/demos.css" />
<script type="text/javascript" src="/dist/lib/jquery-2.1.4.js" ></script>
<script type="text/javascript" src="/dist/js/jquery-weui.js" ></script>
<script type="text/javascript" src="/dist/lib/fastclick.js" ></script>
<script type="text/javascript" src="/src/lib/echarts.js"></script>
<script type="text/javascript" src="/src/lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/src/js/json2.js"></script>
<link rel="stylesheet" href="/adminltecss/userl.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <style>
   	.cusmar{
  		margin-left: 40px;
  	}
  	.header-wai{
  		position: fixed;top:0px; height:60px;background-color: #363436;
  	}
   </style>
<script type="text/javascript" th:inline="javascript">
	
	/*返回上一级  */
		function returnDemo(){
			window.history.back(-1); 
		}
	
	</script>
  </head>
  <body ontouchstart>
  <div class="weui-grids main-typ" >
  	<div class="weui-tabbar header-wai" style="">
  		<a href="#" class="weui-tabbar__item"  id="cusdow">
          <div class="weui-tabbar__icon"></div>
          <p class="weui-tabbar__label" style="font-size: 20px; color: white; line-height: 1px;">
          	<span class="fa fa-angle-left fa-2x" style="color: white; float: left;line-height: 10px;" onclick="returnDemo()"></span>
          	业绩查询<span class="fa fa-angle-down fa-2x" style="color: white;float: right; margin-right: 10px;line-height: 10px; " id="down"></span></p>
        </a>
      </div>
      <form id="searchYeJi">
  	<div class="weui-grids">
  	
  	<div class="weui-cells weui-cells_form" style="margin-top: 60px;">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">ID：</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="eid" type="number" pattern="[0-99]*" placeholder="请输入ID"  name="eid">
        </div>
      </div>
      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
          <label class="weui-label" >姓名：</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请输入姓名" name="ename">
        </div>
        
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label" >开始日期</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="date" value="" name="sdate" style="font-family:'微软雅黑';color:#757575;">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">结束日期</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input " type="date" value="" name="edate" style="font-family:'微软雅黑';color:#757575;">
        </div>
      </div>
    </div>
    
    <div class="button_sp_area" style="text-align: center;">
        <input id="search" type="button" class="weui-btn weui-btn_mini weui-btn_primary" value="查询"></input>
      </div>
    </div></form>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->  
    <br>
  <div id="main" class="weui-grids main-typ" style="width: 100%;height:500px;"></div>
  </div>
    <script type="text/javascript">
    var chartOutChar = null;
    var option1 = {
    		 title: {
    		        text: '经纪人业绩统计',
    		        subtext: '数据来自数据库',
    		        left:"30" 
       		        
    		    },
    		    tooltip: {
    		        trigger: 'axis',
    		        axisPointer: {
    		            type: 'shadow'
    		        }
    		    },
    		    toolbox: {
    		    	right:"30",
  		          feature: {
  		              dataView: {show: true, readOnly: false},
  		              magicType: {show: true, type: ['line', 'bar']},
  		              restore: {show: true},
  		              saveAsImage: {show: true}
  		          }
  		      },
    		    legend: {
    		        data: ['套数', '面积','金额'],
    		        top:'50'
    		    },
    		    grid: {
    		    
    		        left: '2%',
    		        right: '9%',
    		        bottom: '12%',
    		        containLabel: true
    		    },
    		    xAxis: {   		    
    		        type: 'value',
    		        name:'数值',
    		       axisLabel:{
    		    	   rotate:50,
    		    	   interval:0
    		       },
    		        boundaryGap: [0, 0.01]
    		    },
    		    yAxis: {
    		        type: 'category',
    		        nameLocation:'end',
    		        name:'姓名',   		           		        
    		        data:[],
    		        nameTextStyle:{
    		        	fontFamily:'8'
    		        	
    		        },
    		        nameGap:0
    		        
    		    
    		    },
    		    series: [
    		        {
    		            name: '套数',
    		            type: 'bar',
    		            data:[],
    		        barMinHeight:'10'
    		        },
    		        {
    		            name: '面积(m²)',
    		            type: 'bar',
    		            data:[],
    		            barMinHeight:'100'
    		        },
    		        {
    		            name: '金额(￥)',
    		            type: 'bar',
    		            data: []
    		        }
    		    ]
  		  };
   function loadChartOut(url,data) {
	    $.ajax({
	    	url:url,
	    	type:"post",
	    	data:JSON.stringify(data),
	    	contentType:"application/json;charset=utf-8",
	    	dataType:"json",
	    	success:function(data){
	    		 //alert(data.data)
	    		 if (data!=null) { 
	   	            chartOutChar.showLoading({text: '正在努力的读取数据中...'});
	   	            chartOutChar.setOption({
	   	            	yAxis:{
	   	            		name:'姓名',
	   	            		data:data.name
	   	            		
	   	            	},
	   	                series: [
	   	                    {
	   	                        name:'套数',
	   	                        data:data.rank
	   	                    },
	   	                    {
	   	                        name:'面积',
	   	                        data:data.harea
	   	                    },
	   	                    {
	   	                        name:'金额',
	   	                        data:data.eprice
	   	                    }
	   	                ]
	   	            });
	   	            chartOutChar.hideLoading();
	   	        }else {
	   	            alert('提示', data.msg);
	   	        }  
	    	}
	    });
  	}
/* 封装表单数据 */
   $.fn.serializeJson = function () {
	    var serializeObj = {};
	    var array = this.serializeArray();
	    $(array).each(function () {
	        if (serializeObj[this.name]) {
	            if ($.isArray(serializeObj[this.name])) {
	                serializeObj[this.name].push(this.value);
	            } else {
	                serializeObj[this.name] = [serializeObj[this.name], this.value];
	            }
	        } else {
	            serializeObj[this.name] = this.value;
	        }
	    });
	    return serializeObj;
	};

  	//载入图表
  	  $(function (){
  	  	  //alert("进来了");
  		 // var charts=[];
  	    chartOutChar = echarts.init(document.getElementById('main'));
  	    chartOutChar.setOption(option1);
  	  	//charts.push(chartOutChar);
  	  	var url="/queryGetMoneyAndCountAndAreaByYear";
  	    loadChartOut(url,{});
  	  window.addEventListener('resize', function () {
  	    	
  		chartOutChar.resize();
  	        
  	    }); 
  	  
  	    $("#search").click(function(){
  	    	var search = $("#searchYeJi").serializeJson();
  	    	 chartOutChar = echarts.init(document.getElementById('main'));
  	  	    chartOutChar.setOption(option1);
  	  	  	//charts.push(chartOutChar); 	 
  	  	  	//alert(search.ename);
  	  	  	var url="/search";
  	  	    loadChartOut(url,search);
  	  	    window.addEventListener('resize', function () {
  	  	    	
  	  	    chartOutChar.resize();
  	  	        
  	  	    }); 
  	    });
  	});
  		</script>
  		 
       <br/>
      <br/>
  		
  	<div class="weui-tabbar" style="position: fixed;">
        <a href="/WHeadInfoController/intoMainPage" class="weui-tabbar__item weui-bar__item--on">
          <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
          <div class="weui-tabbar__icon">
            
            <img src="/demos/images/icon_nav_button.png" />
          </div>
          <p class="weui-tabbar__label">首页</p>
        </a>
        
        
        
        
        
        
        
        
         
        <!--判断是否登陆  -->
        <a href="javascript:void(0)" class="weui-tabbar__item" th:if="${session.EmployeeInfo!=null}"> 
          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_msg.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">菜单</p>
        </a>
        
        <a th:href="@{/WBizController/loginDemo}" class="weui-tabbar__item" th:if="${session.EmployeeInfo==null}"> 
          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_msg.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">菜单</p>
        </a>

		<!--判断是否登陆  -->
        <a th:href="@{/selectAllCustomers}" class="weui-tabbar__item" th:if="${session.EmployeeInfo!=null}">

          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_article.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">客户</p>
        </a>
         <a th:href="@{/WBizController/loginDemo}" class="weui-tabbar__item" th:if="${session.EmployeeInfo==null}">

          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_article.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">客户</p>
        </a>
        
        
        
        
        
        
        
        
        
        
        
        <a href="/WBizController/HeadPage" class="weui-tabbar__item">
          <div class="weui-tabbar__icon">
            <img src="/demos/images/icon_nav_cell.png" alt=""/>
          </div>
          <p class="weui-tabbar__label">我的</p>
        </a>
      </div>
      
     
  	</body>
  </html>
